/* 
 * Styles for ci helper
 * version: 1.0.3
 */

:host {
    background: rgba(255 255 255 / .9);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    display: flex;
    gap: .8em;
    padding: .8em 1em;
    position: fixed;
    bottom: 1em;
    border-radius: .5em;
    z-index: 11;
    box-shadow: 0 1.2em 1.8em -1.2em rgba(0 0 0 / .5), inset 0 1em 0em -.8em rgb(6 193 63 / 50%);
    max-width: 1280px;
    width: calc(100% - 2em);
    left: 50%;
    transform: translate(calc(-50% - 1em), 0);
    margin: 0 1em;
}

.ci-helper-popup {
    position: absolute;
    background: #555;
    min-width: 2em;
    width: max-content;
    min-height: 1em;
    max-width: 8em;
    text-align: center;
    padding: .8em 1em;
    transform: translate(-50%, -100%);
    border-radius: .5em;
    display: none;
    opacity: .85;
    line-height: 1em;
    color: #eee;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    top: .8em;
    white-space: pre-wrap;
    line-height: 1.2em;
}

.ci-helper-popup::after {
    content: "";
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translate(-50%, 100%);
    border-width: .5em;
    border-style: solid;
    border-color: #555 transparent transparent;
}

.ci-helper-shortcut {
    font-weight: bold;
    border: none;
    padding: .5rem .8rem;
    opacity: .8;
    color: #0e0e0e;
    border-radius: .2em;
    background: rgba(0 0 0 / .08);
    transition: .2s ease-in-out;
}

.ci-helper-shortcut:hover {
    opacity: 1;
    filter: saturate(0.5) brightness(0.2);
}

.red {
    background: rgba(236 0 25 / .12);
}

.green {
    background: rgba(34 177 48 / .12);
}

.transparent {
    background: transparent;
    transition: .1s ease-in;
}

.hover-darkness:hover {
    opacity: .8;
    filter: none;
}

.hover-effect:hover {
    background: rgba(0, 0, 0, .1);
}

.note-style {
    background: transparent;
    pointer-events: none;
    padding-left: 0;
    padding-right: 0;
    font-weight: normal;
}